<template>
    <div>
      <h3>这是第四个demo</h3>
    </div>
  </template>
  
  <script setup lang="ts" name="Demo4">
  // ref 定义引用数据类型
  /**
   * ref 与 reactive
   * 1.ref 基本数据类型 和 引用数据类型 （proxy去修改引用数据类型）
   * refImpl
   * 用于修改浅层的引用数据类型
   * 修改一定在: .value 
   * 2.reactive 引用数据类型
   * proxy
   * 直接进行修改
   * 用于修改深层的引用数据类型
   */
  import { ref,reactive } from "vue";
  // ref 定义引用数据类型
  let obj1 = ref({
    city: "哈尔滨",
    site: "东北",
  });
  let ha = reactive({
      a: {
          b:{
              c:{
                  d:5
              }
          }
      }
  })
  ha.a.b.c.d = 10;
  console.log(ha,'ha')
  let a = ref(2);
  console.log(a.value);
  console.log(obj1.value.city,'obj1');
  </script>
  <style lang="scss" scoped>
      
  </style>